﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
		$(document).ready(function () {
			$("#login_box").hide();
			$("#menu_top").append("<li id='magic-line'></li>");
			animate();
			$("#login").click(function () {
				$("#login_box").slideToggle('500').css({ "display": "block" });
			});
			$("#login").toggle(function () {
				$("#menu_top li").removeClass("current");
				$(this).addClass("current");
				animate();
				}, function(){
				$(this).removeClass("current");
				$("#menu_top .first").addClass("current");
				animate();
			});
			$("#content").click(function (event) {
				if (event.target == this) {
				$("#login_box").hide();
				$("#login").removeClass("current");
				$("#menu_top .first").addClass("current");
				animate()}
				return false;
			});			
            });
			
			function animate(){
				// Menu animate
				var $magicLine = $("#magic-line");
				$magicLine
					.width($(".current").width())
					.height($("#menu_top").height())
					.css("left", $(".current a").position().left)
					.data("origLeft", $magicLine.position().left)
					.data("origWidth", $magicLine.width());
					
				$("#menu_top a").hover(function() {
					$el = $(this);
					leftPos = $el.position().left;
					newWidth = $el.parent().width();
					
					$magicLine.stop().animate({
						left: leftPos,
						width: newWidth
					});
				}, function() {
					$magicLine.stop().animate({
						left: $magicLine.data("origLeft"),
						width: $magicLine.data("origWidth")
					});    
				});
			}
    </script>
            
    <title>Meetdoc</title>
    


</head>

<body>
    <div id="container">
   	  <div id="login_box" class="login">
            <form method="post" action="" name="form_login" >
            <label>
                Email<span> *</span>
                <input type="text"  id="login_e" title="Email" name="Email" /></label><br />
            <label>
                Mật khẩu<span> *</span>
                <input type="password" id="login_p" title="Password" name="Password"  /></label><br />
            <input type="submit" value="Đăng nhập" id="buttom_login" /><br />
            <input type="checkbox" name="ghinho" /><label class="remember">Ghi nhớ</label><br />
            <a class="forgot_p" href="">Quên mật khẩu</a>
            </form>
        </div>
        <div id="content">
        	<div id="top">
                <div class="logo">
                    <a href="index.html"> </a>
                </div>
                <ul id="menu_top">
                    <li class="current first"><a href="index.html"> Demo</a></li>
                    <li><a href="index.html"> Giá</a></li>
                    <li><a href="index.html"> Hỗ Trợ</a></li>
                    <li id="login"><a href="" class="last_item"> Đăng Nhập</a></li>
                </ul>
            </div>
            <div id="center">
            	<div id="banner">
                	<div id="title-qlth">
                    	Quản lý tốt hơn, <br/>
                        <span id="title-pvth">
                        	phục vụ tốt hơn.
                        </span>
                    </div>
                    <div id="detail-title">
                    	Công cụ hữu hiệu để<br />
                        quản lý thông tin bệnh nhân, <br />
                        kế hoạch điều trị và lịch hẹn.
                    </div>
                    <div id="detail-hinh">
                    </div>
                </div>
            </div>
            <div id="bottom">
            	<ul class="col_1">
                    <li><a href="">Giới thiệu</a></li>
                    <li><a href="">Hướng dẫn</a></li>
                    <li><a href="">Giá</a></li>
                </ul>
                <ul class="col_2 ">
                    <li><a href="">Hỗ trợ</a></li>
                    <li><a href="">Liên hệ</a></li>
                </ul>
                <ul class="col_3">
                    <li>21 Lê Quý Đôn Quận 3</li>
                    <li>84 903 800 728</li>
            	</ul>
                <div id="footer_base">
                Copyright &copy; 2012 Meetdoc Project Group 
                </div>
            </div>
        </div>
        <div id="register_box">
        	<div id="register_box_in">
                <span id="try">Sử dụng trong 30 ngày!</span> <br />
                <span id="try30">Đăng ký nhanh và đơn giản</span><br /><br /><br />
                <form method="post" action="" name="form_register" >
                <label>
                    Họ tên<span> *</span>
                    <input type="text"  id="register_name" title="Name" name="Name" /></label><br />
                <label>
                    Email<span> *</span>
                    <input type="text"  id="register_e" title="Email" name="Email" /></label><br />
                <label>
                    Mật khẩu<span> *</span>
                    <input type="password" id="register_p" title="Password" name="Password"  /></label><br />
                <label>
                    Nhập lại mật khẩu<span> *</span>
                    <input type="password" id="register_rp" title="Password" name="Re=Password"  /></label><br />
                <input type="submit" value="Đăng ký" id="buttom_register" /><br />


                </form>
          </div>
      </div>
        <div class="header"></div>
        <div class="footer">
        </div>
        
        <div class="background_left"></div>
        
    </div>

</body>
</html>
